<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>

  <div class="avue-contail avue--collapse avue-main-mobile">
    <div class="avue-layout avue-layout--horizontal ">
      <div class="avue-main">
        <!-- 主体视图层 -->
        <div id="avue-view">
          <router-view #="{ Component }">
            <keep-alive :include="$store.getters.tagsKeep">
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </div>
        <!-- 占位容器 -->
        <div class="placegolder-container"></div>
        <!-- 底部导航栏 -->
        <div class="bottom-tabs" >
          <div v-for="item in menu[0].children" style="display: contents">
            <div class="tabs-item" v-if="!item.hide  &&( item.nav==2||  item.nav==4) "   >
              <div  @click="open(item)" style="text-align: center;" >
                <i :class="item[iconKey]"></i>
                <div>
                  <span class="tab-text"  :class="item[pathKey] ==active ?'active':''">{{getTitle(item)}}</span>
                </div>
              </div>
            </div>

          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import index from '@/framework-core/mixins/index'
import { mapGetters } from "vuex";
import tags from "@/framework-core/page/index/tags.vue";
import logo from "@/framework-core/page/index/logo.vue";
import sidebar from "@/framework-core/page/index/sidebar/index.vue";
import website from '@/framework-core/config/website'
import { validatenull } from '@/framework-core/utils/validate'


export default {
  mixins: [index],
  components: {
    top,
    logo,
    tags,
    sidebar
  },
  name: "index",
  provide () {
    return {
      index: this
    };
  },
  data () {
    return {
      props: website.menu,
      active:""
    }
  },
  computed: {
    ...mapGetters([ "isHorizontal","isRefresh", "isLock", "isCollapse", "isSearch", "menu", "setting"]),
    validSidebar () {
      this.$route.meta = {"topbar":false,"sideba":"horizontal"}
      return !((this.$route.meta || {}).menu == false || (this.$route.query || {}).menu == 'false')
    },
    labelKey () {
      return this.props.label
    },
    pathKey () {
      return this.props.path
    },
    queryKey () {
      return this.props.query
    },
    iconKey () {
      return this.props.icon
    },
    childrenKey () {
      return this.props.children
    }
  },
  props: [],
  methods: {
    getPath(item) {
      return item[this.pathKey]
    },
    getTitle(item) {
      return this.$router.$avueRouter.generateTitle(item, this.props);
    },
    validRoles(item) {
      item.meta = item.meta || {};
      return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
    },
    open(item) {
      this.active = item[this.pathKey];
      this.$router.push({
        path: item[this.pathKey],
        query: item[this.queryKey]
      });

    },
    //打开菜单
    openMenu (item = {}) {
      this.$store.dispatch("GetMenu", item.parentId).then(data => {
        if (data.length !== 0) {
          this.$router.$avueRouter.formatRoutes(data, true);
        }
        //当点击顶部菜单做的事件
        if (!validatenull(item)) {
          let itemActive = {},
                  childItemActive = 0;
          //vue-router路由
          if (item.path) {
            itemActive = item;
          } else {
            if (this.menu[childItemActive].length == 0) {
              itemActive = this.menu[childItemActive];
            } else {
              itemActive = this.menu[childItemActive].children[childItemActive];
            }
          }
          this.$store.commit('SET_MENUID', item);
          this.$router.push({
            path: itemActive.path
          });
        }

      });
    }
  }
};
</script>

<style lang="scss" scoped>
  .placegolder-container {
    height: 70px;
  }

  #avue-view{
    background-color: white!important;
  }

  .avue-main-mobile .avue-main{
    margin-left:0vw !important;
  }

  .bottom-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0px -1px 1px #e6e6e6;
    background-color: #fff;

    .tabs-item {
      padding: 5px 0;
      flex: 1;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      .tab-icon {
        width: 30px;
        height: 30px;
        border-radius: 4px;
      }

      .tab-text {
        font-size: 14px;

        &.active {
          color: var(--el-color-primary);
        }
      }
    }
  }
</style>
